<template>
  <div class="function-set">
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-lock"></i>隐私设置</span>
        <div>
          <div class="set-avatar">
            <img src="../assets/images/head-portrait.jpg" />
            <div class="point" v-show="isState"></div>
          </div>

          <h3 class="online-state">在线状态</h3>
          <p class="set-described">
            开启后，互关好友可以在私信、通知、分享等页面看到你的活跃状态。可在PC端“
            隐私设置”中更改，也可在APP端“设置”-“ 隐私设置”中更改。
          </p>
          <hr style="border: 0.5px solid #303030; margin-top: 20px" />
          <div class="open-status">
            <h4>展示在线状态</h4>
            <el-switch
              v-model="isState"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @click="changeState()"
            >
            </el-switch>
          </div>
          <div class="open-status">
            <h4>公开喜欢的作品</h4>
            <el-switch
              v-model="openLike"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <div class="open-status">
            <h4>公开收藏的作品</h4>
            <el-switch
              v-model="openCollect"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </el-tab-pane>
     
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openCollect:false,
      openLike:false,
      isState: true,
      tabPosition: "left",
    };
  },
  methods:{
    changeState(){
      this.isState = !this.isState
    }
  }
};
</script>

<style>
.set-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 90px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.function-set .el-tabs {
  height: 400px;
}

.function-set .el-tabs__active-bar {
  background-color: transparent !important;
}
/*去掉tabs底部的下划线*/
.function-set .el-tabs__nav-wrap::after {
  position: static !important;
}

.function-set .el-tabs__item {
  height: 50px;
}
.set-avatar {
  margin: auto;
  position: relative;
  width: 60px;
}
.online-state {
  text-align: center;
  color: #ffff;
}
.set-described {
  width: 82%;
  text-align: center;
  font-size: 12px;
  margin: 10px auto;
}
.open-status {
  display: flex;
  padding:10px 20px 10px 12px;
  justify-content: space-between;
  color: #fff;
}
.point {
  position: absolute;
  background: #13c15a;
  top: 65px;
  left: 45px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}
</style>
